/*
 * Created on Mon Jun 11 2018 by Ronnie Ren (zhaosong.ren) from Accenture
 *
 * Copyright (c) 2018 DingXin information & technology limited company.
 */

import { NavController, IonicPage, Platform } from "ionic-angular";
import { Component, ViewChild, ElementRef, OnInit } from "@angular/core";
import * as echarts from 'echarts';
import { FlowLineChartsConfig } from "./flow-line-echart.config";

@Component({
  selector: 'cash-flow',
  templateUrl: 'cash-flow.component.html'
})

export class CashFlowComponent implements OnInit {

  format: boolean = true;
  // segmentSelected: string = "target2";
  selected: string = 'index';
  xAxisData: Array<string> = [];
  @ViewChild('indexChart', {read: ElementRef}) indexChart: ElementRef;
  @ViewChild('flowChart', {read: ElementRef}) flowChart: ElementRef;
  @ViewChild('compositeChart', {read: ElementRef}) compositeChart: ElementRef;
  constructor(
    ) {
    for (let i = 1; i <= 12; i++) {
      if (i.toString().length < 2) {
        this.xAxisData.push(`0${i}`);
      } else {
        this.xAxisData.push(`${i}`);
      }
    }
  }

  ngOnInit() {
    this.getIndexMap();
    this.getFlowMap();
    this.getCompositeMap();
  }

  segmentSelected(str) {
    this.selected = str;
    switch (str) {
      case "index" : this.getIndexMap(); break;
      case "flow" : this.getFlowMap(); break;
      case "composite" : this.getCompositeMap(); break;
      default : break;
    }
  }


  getIndexMap() {
    echarts.init(this.indexChart.nativeElement).setOption(this.getConfigOpt());
  }

  getFlowMap() {
    echarts.init(this.flowChart.nativeElement).setOption(this.getConfigOpt());
  }

  getCompositeMap() {
    echarts.init(this.compositeChart.nativeElement).setOption(this.getConfigOpt());
  }

  private getConfigOpt() {
    let option = FlowLineChartsConfig.config;
    let seriesData1: Array<any> = [];
    let seriesData2: Array<any> = [];
    let pointHasColor = {
      symbolSize: 12,
      itemStyle: {
        borderColor: '#89A6FF',
        borderWidth: 3
      }
    };
    let point = {
      symbolSize: 0
    };
    for (let i = 1; i <= 12; i++) {
      if (i === 1 || i === 12) {
        pointHasColor["value"] = (Math.random() * 100).toFixed(0);
        seriesData1.push(JSON.parse(JSON.stringify(pointHasColor)));
      } else {
        point["value"] = (Math.random() * 100).toFixed(0);
        seriesData1.push(JSON.parse(JSON.stringify(point)));
      }
    }
    for (let i = 1; i <= 12; i++) {
      if (i === 4) {
        let pointHasColor2 = pointHasColor;
        pointHasColor2["value"] = (Math.random() * 100).toFixed(0);
        pointHasColor2.itemStyle.borderColor = '#89A6FF';
        seriesData2.push(JSON.parse(JSON.stringify(pointHasColor2)));
      } else {
        point["value"] = (Math.random() * 100).toFixed(0);
        seriesData2.push(JSON.parse(JSON.stringify(point)));
      }
    }
    option.xAxis[0]["data"] = this.xAxisData;
    option.series[0]["data"] = seriesData1;
    option.series[1]["data"] = seriesData2;
    seriesData1 = null;
    seriesData2 = null;
    pointHasColor = null;
    point = null;
    return option;
  }

}

